<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
<!-- 		<div class="test_child"></div>
		<div class="test">
			<div>测试</div>
		</div> -->
		<div id="app"></div>
	<!-- 	<style>
			.test {
				background-color: cornflowerblue;
				width: 200px;
				height: 200px;
				padding: 20px;
				box-sizing: border-box;
				border: 10px solid #ccc;
			}

			.test_child {
				width: 200px;
				height: 200px;
				background-color: antiquewhite;
			}
		</style> -->
		<script>
			// function sendAJAX(url) {
			// 	return new Promise((resolve, reject) => {
			// 		const xhr = new XMLHttpRequest();
			// 		xhr.open("GET", url);
			// 		xhr.send();
			// 		// 处理结果
			// 		xhr.onreadystatechange = function() {
			// 			if (xhr.readyState === 4) {
			// 				if (xhr.status >= 200 && xhr.status < 300) {
			// 					resolve();
			// 				} else {
			// 					reject();
			// 				}
			// 			}
			// 		}
			// 	})
			// }

			// arr1 = [1, 1, 2, 3, 4, 3, 1]
			// let set1 = new Set(arr1)
			// console.log(set1)
			// let arr = [...set1];
			// console.log(arr)

			// 2022-06-21
			// js基础数据类型undefined
			// let a;

			// console.log(a);
			// console.log(typeof a);


			// js基础数据类型 null
			// 1
			// let a;
			// a = null;
			// console.log(a)//null
			// console.log(typeof a)//null的数据类型是object


			// 2 获取元素没有对应的id
			// let b = document.getElementById('name');
			// console.log(b);//null


			// 3 正则表达式没有匹配到
			// let reg = /\d/	
			// console.log(reg.exec('zzz')) //null

			// --
			// console.log(c)


			// --预处理的函数必须是声明方式的函数（不是函数表达式）
			// d();
			// e();//会报错

			// //声明方式的函数
			// function d() {
			// 	console.log('d')
			// }

			// // 函数表达式
			// var e = function(){
			// 	console.log('e')
			// }
			let obj = {
				name: '张三',
				age: 18,
				getAge: function() {
					return 18 + 6;
				}
			};
			// for (let s of Object.keys(obj)) {
			// 	console.log(s)
			// }
			// for (let s in obj) {
			// 	console.log(s)
			// }


			let arr1 = [{
				name: '张三',
				age: 18
			}, {
				name: '李四',
				age: 19
			}, {
				name: '张武',
				age: 20
			}];

			// console.log(arr1.map((item) => {
			// 	if (item.age > 18) {
			// 		return {
			// 			...item,
			// 			adult: true
			// 		}
			// 	} else {
			// 		return {
			// 			...item,
			// 			adult: false
			// 		}
			// 	}
			// }))


			// console.log(arr1.find(item => {return item.age > 18}))


			// console.log(arr1.filter(item => item.age > 18))

			// console.log(arr1.reduce((total, item) => total * item.age, 100))


			// console.log(arr1.every((item) => item.age > 16))

			// for (let s in arr1) {
			// 	console.log(s)
			// }

			// let mymap = new Map();
			// mymap.set('name','张三');
			// mymap.set('name2','张四');
			// console.log(mymap);

			// const myset = new Set([1,2,2,3]);
			// console.log(myset);


			// var add = (function() {
			// 	var counter = 0;
			// 	return function() {
			// 		return counter += 1;
			// 	}
			// })();

			// var add = (function() {
			// 	var counter = 0;
			// 	return function() {
			// 		return counter += 1;
			// 	}
			// })();


			// console.log(add());
			// console.log(add());
			// console.log(add());

			// 简单的闭包
			// var fn;

			// function add() {
			// 	var counter = 0;
			// 	fn = function() {
			// 		return counter++;
			// 	}
			// }
			// add();
			// console.log(fn())
			// console.log(fn())
			// console.log(fn())

			// let value = -2;
			// // let reg = /^\+?(0|([1-9]\d*))(\.\d+)?$/g;
			// let reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/;
			// console.log(reg.test(value));

			// 防抖
			// 防抖策略是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。
			// 应用场景：用户在输入框输入一串字符是，可以通过防抖策略。只在输入完后，才执行查询请求。这样可以有效较少请求次数，节约请求资源。

			// function debouncer(fn, wait) {
			// 	var timeout = null;//使用闭包，缓存变量
			// 	return function(){
			// 	    if(timeout != null){
			// 	        console.log('清除定时器啦');
			// 	        clearTimeout(timeout);//清除这个定时器
			// 	    }
			// 	    timeout = setTimeout(fn,wait)
			// 	}
			// }

			// function handle() {
			// 	console.log('触发函数')
			// }
			// window.addEventListener('scroll', debouncer(handle,5000));

			// 节流
			// 可以减少一段时间内事件的触发频率
			// 应用场景：懒加载时要监听滚动条的位置，但不必每次滑动都触发，可以降低计算频率

			// 声明临时存储变量
			let temp = "初始数据"
			// 数据监听对象
			Object.defineProperty(window, "actual", {
			 // 监听读取数据
				get() {
					console.log("获取数据调用");
					return temp
				},

				// 监听修改数据
				set(value) {
					console.log("修改数据调用");
					temp = value
					bind(actual) // 数据一旦发生变化就重新渲染页面
				}
			})

			// vue 数据双向绑定
			function bind(content) {
				app.innerHTML = content
			}
			bind(actual)
			
			window.actual = '222'
			
			
			
			
		</script>
	</body>
</html>
